<script>
import { inject, computed } from "vue";
import { ElButton, ElPopover } from "element-plus";
import { useRouter } from "vue-router";

export default {
  components: {
    ElButton,
    ElPopover,
  },
  setup() {
    const globalState = inject('globalState');
    const router = useRouter();
    const username = computed(() => globalState.username)
    if (!username) {
      router.push("/login");
    }
    const loginOut = () => {
      ElMessage.success("退出登录成功");
      globalState.username = "";
      localStorage.removeItem("username");
      router.push("/login");
    };
    const goHome = () => {
      router.push("/");
    };
    const goSelfResume = () => {
      router.push("/selfResume");
    };
    return {
      username,
      loginOut,
      goHome,
      goSelfResume
    };
  },
};
</script>

<template>
  <div class="home-container bg-[#f5f6f7] w-[1280px] h-[100vh] overflow-hidden">
    <div
      class="w-full bg-[#f8f9f6] h-[60px] flex justify-between items-center px-[16px]"
    >
      <div
        class="flex justify-center items-center cursor-pointer"
        @click="goHome"
      >
        <img
          src="./assets/vue.svg"
          class="w-[40px] h-[40px] mr-[10px]"
          alt=""
        />
        <h1>简历识别系统</h1>
      </div>
      <div class="flex items-center" v-if="username">
        <div class="cursor-pointer mr-[20px]" @click="goSelfResume">个人简历</div>
        <ElPopover placement="bottom" :width="100" trigger="click">
        <template #reference>
          <div class="text-[14px] cursor-pointer">
            <span>你好,</span>
            <span>{{ username }}</span>
          </div>
        </template>
        <template #default>
          <div class="flex justify-center">
            <ElButton @click="loginOut">退出登录</ElButton>
          </div>
        </template>
      </ElPopover>
      </div>
      
    </div>
    <RouterView :username="username"/>
  </div>
</template>

<style scoped></style>
